﻿<div class="shirtImagesDiv">
    <input name="color" id="color" type="hidden" value="{$shirt.color}" />
    <input name="sex" id="sex" type="hidden" value="{$shirt.sex}" />
	<input name="id" id="id" type="hidden" value="{$shirt.ref}" />
    <img alt="shirt" src="img/shirts/{$shirt.id}-big.png" class="bigImgShirt" id="bigShirt" />
</div>

<fieldset class="shirtInfoFieldset">
    <legend>Informations</legend>

    <table class="shirtInfoTable">
        <tr>
            <td class="bold">Name:</td>
            <td>{$shirt.title}</td>
            <td class="blankTD" ></td>
            <td class="bold">Référence:</td>
            <td>#{$shirt.ref}</td>
        </tr>
		<tr>
            <td class="bold">Déscription:</td>
            <td colspan="4">{$shirt.description}</td>
        </tr>
        <tr>
            <td class="bold">Marque:</td>
            <td>{$shirt.brand}</td>
            <td class="blankTD" ></td>
            <td class="bold">Matière:</td>
            <td>{$shirt.material}</td>
        </tr>
        <tr>
            <td class="bold">Prix:</td>
            <td>{$shirt.price}</td>
            <td></td>
            <td class="bold">Disponibilité:</td>
            <td id="dispo">{$shirt.dispo}</td>
        </tr>
        <tr>
            <td class="bold">Sexe:</td>
            <td>
                <input id="sexRadio" type="radio" name="sex" value="H" {if {$shirt.sex} eq 'H'}checked{/if} onclick="updateInfo();" >H</input>
                <br />
                <input type="radio" name="sex" value="F" {if {$shirt.sex} eq 'F'}checked{/if} onclick="updateInfo();">F</input>
            </td>
            <td></td>
            <td class="bold">Taille:</td>
            <td>
                <select name="size" id="size" onclick="updateInfo();">
                    <option value="S">S</option>
                    <option value="M">M</option>
                    <option value="L">L</option>
                    <option value="XL">XL</option>
                    <option value="XXL">XXL</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class="bold">Quantité:</td>
            <td>
                <input name="quantity" type="number" id="quantity" min="1" value="{$shirt.quantity}" class="shirtQuantity" />
            </td>
            <td></td>
            <td class="bold">Couleur:</td>
            <td>
                <span class="shirtColor" style="background-color:#e60024;" onclick="changeColorInfo('red');" ></span>
                <span class="shirtColor" style="background-color:#d3d9e5;" onclick="changeColorInfo('grey');" ></span>
                <span class="shirtColor" style="background-color:#ffd800;" onclick="changeColorInfo('yellow');" ></span>
                <span class="shirtColor" style="background-color:#17a5de;" onclick="changeColorInfo('blue');" ></span>
                <span class="shirtColor" style="background-color:#89d165;" onclick="changeColorInfo('green');" ></span>
            </td>
        </tr>	

    </table>



    <br />
    <button type="button" id="buyButton" onclick="buySelectedShirt();">Ajouter au panier</button>

</fieldset>

<script type="text/javascript" src="pages/controller/js/info.js"></script>
<script type="text/javascript">

	//JQuery main entry point
	$(document).ready(function() {
		changeColorInfo('{$shirt.color}');
		$('#size').val('{$shirt.size}');
	});
</script>
